<template>
  <!-- 业绩分析 -->
  <div class="global-topList pt-16">
    <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="月业绩分析" name="first">
        <monthAnalysis></monthAnalysis>
      </el-tab-pane>
      <el-tab-pane label="季度业绩分析" name="second">
        <quarterAnalysis></quarterAnalysis>
      </el-tab-pane>
      <el-tab-pane label="年累业绩分析" name="third">
        <yearsAnalysis></yearsAnalysis>
      </el-tab-pane>
      <el-tab-pane label="KPI报表" name="fourth">
        <KPIAnalysis></KPIAnalysis>
      </el-tab-pane>
    </el-tabs> -->

    <div class="top_wrap pt-16">
      <div
        v-for="(item, _index) in tabList"
        :key="_index"
        class="tab_item"
        :class="type === item.index ? 'active_tab_item' : ''"
        @click="chooseTab(item)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="active_list">
      <!-- 月 业绩分析 -->
      <monthAnalysis v-if="type === 1"></monthAnalysis>
      <!-- 季度 分析 -->
      <quarterAnalysis v-if="type === 2"></quarterAnalysis>
      <!-- 年 分析 -->
      <yearsAnalysis v-if="type === 3"></yearsAnalysis>
      <!-- KPI -->
      <KPIAnalysis v-if="type === 4"></KPIAnalysis>
    </div>
  </div>
</template>

<script>
import monthAnalysis from './childComp/monthAnalysis.vue'
import quarterAnalysis from './childComp/quarterAnalysis.vue'
import yearsAnalysis from './childComp/yearsAnalysis.vue'
import KPIAnalysis from './childComp/KPIAnalysis/KPIAnalysis.vue'
export default {
  components: {
    monthAnalysis,
    quarterAnalysis,
    yearsAnalysis,
    KPIAnalysis
  },
  data() {
    return {
      activeName: 'first',
      tabList: [
        {
          index: 1,
          name: '月业绩看板',
          active: true
        },
        {
          index: 2,
          name: '季度业绩分析',
          active: true
        },
        {
          index: 3,
          name: '年累计分析',
          active: true
        },
        {
          index: 4,
          name: 'KPI分析',
          active: true
        }
      ],
      type: 1
    }
  },
  methods: {
    handleClick(tab, event) {},
    chooseTab(e) {
      this.type = e.index
    }
  }
}
</script>

<style lang="less" scoped>
.global-topList {
  background-color: #fff;
  .el-tabs {
    /deep/ .el-tabs__nav-scroll {
      display: flex;
      width: 50%;
      margin: 0 auto;
      .el-tabs__nav {
        margin: 0 auto;
      }
    }
  }
  .top_wrap {
    // width: 100%;
    display: flex;
    justify-content: center;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    // border-bottom-width: 90%;
    border-bottom: 2px solid #f6f6f6;
    .tab_item {
      width: 120px;
      margin: 0 30px;
      text-align: center;
      cursor: pointer;
    }
    .active_tab_item {
      color: #017aff;
      border-bottom: 2px solid #017aff;
    }
  }
  .active_list {
    padding-top: 16px;
  }
}
</style>
